<!--
 * @Author: wangshuguang
 * @Date: 2022-02-16 19:48:13
 * @LastEditTime: 2022-03-18 12:48:49
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <el-card class="common-container">
    <el-form ref="filterForm" :model="listQuery" class="demo-form-inline" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务单号" prop="ordId">
            <el-input v-model="listQuery.ordId" clearable placeholder="请输入" size="small" class="width100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="租户名称/业务编号" prop="tenantInfo">
            <el-input v-model="listQuery.tenantInfo" clearable placeholder="请输入" size="small" class="width100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单状态" prop="ordStatus">
            <el-select v-model="listQuery.ordStatus" clearable placeholder="请选择订单状态" size="small" class="width100">
              <el-option label="待审核" value="A" />
              <el-option label="审核通过" value="S" />
              <el-option label="审核拒绝" value="F" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" round size="small" @click="fetchData">查询</el-button>
            <el-button type="primary" round size="small" @click="resetFilterForm">重置</el-button>
            <el-button type="text" round size="small" @click="exportFile">导出excel</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table size="medium" :data="list" border>
      <el-table-column label="序号" width="50" prop="id">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="ordId" align="center" label="业务单号" />
      <el-table-column prop="tenantName" align="center" label="租户">
        <template slot-scope="scope">
          <div>{{ scope.row.tenantName }}</div>
          <div>({{ scope.row.tenantId }})</div>
        </template>
      </el-table-column>
      <el-table-column prop="ordAmt" align="center" label="订单金额">
        <template slot-scope="scope">
          <div>￥{{ scope.row.ordAmt }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="discount" align="center" label="折扣">
        <template slot-scope="scope">
          <div>{{ scope.row.discount }}折</div>
        </template>
      </el-table-column>
      <el-table-column prop="flowBalance" align="center" label="可获流量余额" />
      <el-table-column prop="accountNo" align="center" label="收款公户">
        <template slot-scope="scope">
          <div>{{ `${scope.row.accountBankName}(${scope.row.accountBranchBank})` }}</div>
          <div>{{ scope.row.accountNo }}</div>
          <div>{{ scope.row.accountName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="ordStatusZh" align="center" label="状态" />
      <el-table-column prop="updateTime" align="center" label="更新时间" />
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="viewData(scope.row)">详情</el-button>
          <el-button v-if="scope.row.ordStatus == 'A'" size="small" type="primary" @click="editdata(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
      :title="infoConfig.title"
      :visible.sync="infoVisible"
      size="60%"
      direction="rtl"
    >
      <purchaseAuditInfo v-if="infoVisible" :info-config="infoConfig" @sucClose="sucClose" />
    </el-drawer>
  </el-card>
</template>

<script>
import { tenantFlowAuditList, tenantFlowAuditExport } from '@/api/flowConf'
import purchaseAuditInfo from './components/purchaseAuditInfo.vue'
import dayjs from 'dayjs'
export default {
  components: { purchaseAuditInfo },
  data() {
    return {
      infoVisible: false,
      infoConfig: {
        title: '',
        data: {}
      },
      form: {},
      scope: 0,
      total: 0,
      statusOptions: ['停用', '正常'],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        ordStatus: undefined,
        ordId: undefined,
        tenantInfo: undefined
      },
      list: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 重置
    resetFilterForm() {
      this.$refs.filterForm.resetFields()
    },
    exportFile() {
      tenantFlowAuditExport({
        'pageNum': this.listQuery.pageNum,
        'pageSize': this.listQuery.pageSize,
        'ordId': this.listQuery.ordId,
        'tenantInfo': this.listQuery.tenantInfo,
        'ordStatus': this.listQuery.ordStatus,
        'isInclude': true,
        'fieldList': [
          {
            'fieldName': 'id',
            'fieldShowName': '序号',
            'fieldOrderNumber': 1
          },
          {
            'fieldName': 'ordId',
            'fieldShowName': '业务单号',
            'fieldOrderNumber': 2
          },
          {
            'fieldName': 'tenantId',
            'fieldShowName': '租户',
            'fieldOrderNumber': 3
          },
          {
            'fieldName': 'ordAmt',
            'fieldShowName': '订单金额',
            'fieldOrderNumber': 4
          },
          {
            'fieldName': 'discount',
            'fieldShowName': '折扣',
            'fieldOrderNumber': 5
          },
          {
            'fieldName': 'flowBalance',
            'fieldShowName': '可获流量余额',
            'fieldOrderNumber': 6
          },
          {
            'fieldName': 'accountNo',
            'fieldShowName': '收款公户',
            'fieldOrderNumber': 7
          },
          {
            'fieldName': 'ordStatus',
            'fieldShowName': '状态',
            'fieldOrderNumber': 8
          },
          {
            'fieldName': 'updateTime',
            'fieldShowName': '更新时间',
            'fieldOrderNumber': 9
          }
        ]
      }).then(res => {
        console.log('下载文件', res)
        this.$downloadFile(res.data, `租户采购记录-${dayjs(new Date()).format('YYYY年MM月DD日 HH-mm-ss')}`)
      })
    },
    sucClose() {
      this.infoVisible = false
      this.fetchData()
    },
    editdata(data) {
      this.infoConfig = {
        type: 'edit',
        title: '审核',
        data
      }
      this.infoVisible = true
    },
    viewData(data) {
      this.infoConfig = {
        type: 'detail',
        title: '详情',
        data
      }
      this.infoVisible = true
    },
    fetchData() {
      tenantFlowAuditList(this.listQuery).then(res => {
        if (res.code === 0) {
          this.list = res.data.list.map(item => {
            return {
              ...item,
              imgList: [item.atta1, item.atta2, item.atta3].filter(v => !!v)
            }
          })
          this.total = res.data.total
        }
      })
    },
    toRolesName(roles) {
      const rolesNames = []
      for (let i = 0; i < roles.length; i++) {
        rolesNames.push(roles[i].name)
      }
      return rolesNames.join(',')
    },
    handleEdit(user) {
      this.$refs.userDialog.openEdit(user.id).then(() => {
        this.fetchData()
      })
    },

    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleResetPassword(user) {
      this.$refs.resetPw.open(user.id)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-container {
	margin-top: 20px;
	margin-bottom: 20px;
}

.search-wrap {
	width: 300px;
	margin-right: 10px;
}
.el-button--primary:hover,
.el-button--primary:focus {
	background-color: $btnBgc;
	border-color: $btnBgc;
}
</style>
